<template>
    <el-dialog :close-on-click-modal="false" ref="dialogform"
        :title="`${addEditName}${markType == 'IOT' ? '物联' : '虚拟'}设备`" :visible.sync="dialogVisible" width="60%"
        :before-close="handleClose">
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px" class="demo-ruleForm">
            <el-form-item v-if="markType == 'IOT'" label="物联设备选择" prop="rtuNo">
                <el-select class="w100p" v-model="ruleForm.rtuNo" placeholder="请选择物联设备" filterable clearable
                    @change="depDataItem">
                    <el-option v-for="item in dataItemList" :key="item.rtuNo" :label="item.rtuName"
                        :value="item.rtuNo" />
                </el-select>
            </el-form-item>
            <el-form-item :label="`${markType == 'IOT' ? '物联' : '虚拟'}设备名称`" prop="deviceName">
                <el-input v-model="ruleForm.deviceName" placeholder="请输入设备名称"></el-input>
            </el-form-item>
            <el-form-item v-if="markType == 'IOT'" label="经度" prop="axisX">
                <el-input type="number" v-model="ruleForm.axisX" placeholder="请输入经度">
                    <template slot="append">°</template>
                </el-input>
            </el-form-item>
            <el-form-item v-if="markType == 'IOT'" label="纬度" prop="axisY">
                <el-input type="number" v-model="ruleForm.axisY" placeholder="请输入纬度">
                    <template slot="append">°</template></el-input>
            </el-form-item>
            <!-- <el-form-item v-if="markType == 'IOT'" label="地图" prop="">
                <Map v-if="dialogVisible" :lnglatForm="ruleForm.axisX ? {
                    lng: ruleForm.axisX,
                    lat: ruleForm.axisY,
                } : {}" @updateLocation="updateLocation" style="height: 300px;" />
            </el-form-item> -->

        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button @click="cancel">取 消</el-button>
            <el-button type="primary" @click="submitForm">确 定</el-button>
        </span>
    </el-dialog>
</template>
<script>
import equimentManagement from '@/api/basicInformation/equimentManagement.js'
import Map from '@/components/Amap/amap.vue'
export default {
    components: { Map },
    props: {
        addEditFlag: {
            type: String,
            default: () => {
                return 'add'
            }
        },
        data: {
            type: Object,
            default: () => {
                return {}
            }
        },
        title: {
            type: String,
            default: () => {
                return '操作表单'
            }
        },
        dialogVisible: {
            type: Boolean,
            default: () => {
                return false
            }
        },
        markType: {
            type: String,
            default: () => {
                return ''
            }
        },
    },
    data() {
        return {
            dataItemList: [],
            addEditName: '添加',
            addEditApi: equimentManagement.addFarmingTypelist,
            ruleForm: {},
            rules: {
                rtuNo: [
                    { required: true, message: '请选择物联设备', trigger: 'change' }
                ],
                deviceName: [
                    { required: true, message: '请输入物联设备名称', trigger: 'change' }
                ]
            }
        }
    },
    computed: {

    },
    watch: {
        dialogVisible(v) {
            v && this.initData()
        }
    },

    mounted() { },
    methods: {
        initData() {
            if (this.addEditFlag == 'add') {
                this.resetForm()
                this.addEditApi = equimentManagement.addFarmingTypelist
                this.addEditName = '添加'
            } else if (this.addEditFlag == 'edit') {
                this.ruleForm = { ...this.data }
                this.addEditApi = equimentManagement.editFarmingTypelist
                this.addEditName = '编辑'
            }
            this.getDataItemByList();
        },
        updateLocation(e) {
            this.$set(this.ruleForm, 'axisX', e.lng);
            this.$set(this.ruleForm, 'axisY', e.lat);
        },
        async getDataItemByList() {
            let { data } = await equimentManagement.getDataItemByList(sessionStorage.organizationNo);
            this.dataItemList = data || [];
            console.log(data)
        },
        //获取物联设备名称
        depDataItem(e) {
            let index = this.dataItemList.findIndex(b => b.rtuNo === e);
            let form = { ...this.dataItemList[index] };
            this.$set(this.ruleForm, "deviceName", form.rtuName);
        },
        //提交表单
        submitForm() {
            this.$refs.ruleForm.validate((valid) => {
                if (valid) {
                    this.addEditApi({
                        ...this.ruleForm,
                        type: this.markType,
                        organizationNo: sessionStorage.organizationNo
                    }).then(res => {
                        this.cancel();
                        this.$message[res.code == 1 ? 'success' : 'warning'](res.code == 1 ? '操作成功' : res.msg || '操作失败')
                    }).catch(err => {
                        console.log(err)
                    })
                } else {
                    return false;
                }
            })
        },
        //重置
        resetForm() {
            this.ruleForm = {};
            this.$refs.ruleForm && this.$refs.ruleForm.resetFields()
        },
        //取消关闭
        cancel() {
            this.resetForm()
            this.$emit("closeDialog")
        },
        handleClose(done) {
            this.$confirm('确认关闭？')
                .then(_ => { this.resetForm(); this.cancel() })
                .catch(_ => { });
        }
    }
};
</script>
<style lang="scss" scoped></style>